<template>
    <div>
        <div class="fileList">
            <el-row>
                <el-col :span="12" v-for="(item, index) in fileList" :key="index">
                    <div class="image">
                        <el-image style="width: 100px; height: 100px" :src="item" fit="contain" />
                        <span class="removeIcon" v-show="item" @click=handleStandardsImgRemove()>
                            <span class="el-upload-list__item-preview">
                                <i class="el-icon-circle-close" style="font-size: 20px;"></i>
                            </span>
                        </span>
                    </div>
                </el-col>
                <el-col :span="12" v-if="fileList.length < count">
                    <div type="primary" @click="upLoad()" class="form-btn">
                        <i class="el-icon-plus addIcon"></i>
                    </div>
                </el-col>

            </el-row>
        </div>
        <!-- <el-form :model="upform" style="width:100%;" ref="upform" label-width="100px">
            <el-form-item label="上传附件:">
                <el-button type="primary" @click="upLoad()" size="mini" class="form-btn">点击上传</el-button>
            </el-form-item>
        </el-form> -->

    </div>
</template>
<script>
export default {
    props: {
        fileType: { type: Array },//文件类型
        fileList: { type: Array },//文件列表
        count: { type: Number },//文件数
    },
    data() {
        return {
            upform: {}
        }
    },
    methods: {
        // 请求-上传附件
        upLoad() {
            const _this = this;
            const inputFile = document.createElement("input")
            inputFile.type = "file"
            inputFile.style.display = "none"
            document.body.appendChild(inputFile)
            inputFile.click()
            inputFile.addEventListener("change", function () {
                const file = inputFile.files[0];
                var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
                if (!fileType.includes(testmsg)) {
                    _this.$message.warning("上传的文件格式只能是,xls,xlsx,et");
                    document.body.removeChild(inputFile);
                    return false;
                }
                const formData = new FormData();
                formData.append("file", file);
                console.log(inputFile.files);
            })
        },
    },
}
</script>
<style lang="scss" scoped>
.fileList {
    background-color: #f2f2f2;
}

.form-btn {
    height: 50px;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.removeIcon {
    position: absolute;
    right: 0;
    top: 0;
    display: none;
}

.image:hover .removeIcon {
    display: block;
}

.img {
    position: relative;
}

.addIcon {
    font-size: 40px;
}
</style>